<template>
  <div class="container">
    <Scroll
      @scroll="onScroll"
      class="index-list"
      :probe-type="3"
      ref="scrollref"
      v-loading="!singerlist.length"
    >
      <ul ref="wrapref" v-if="singerlist">
        <li v-for="group in singerlist" :key="group.title" class="group">
          <h2 class="title">{{ group.title }}</h2>
          <ul>
            <li
              v-for="item in group.list"
              :key="item.id"
              class="item"
              @click="todetail(item)"
            >
              <img class="avatar" v-lazy="item.pic" />
              <span class="name">{{ item.name }}</span>
            </li>
          </ul>
        </li>
      </ul>
      <div class="fixed" v-show="fixedTitle">
        <div class="fixed-title">{{ fixedTitle }}</div>
      </div>
      <div
        class="shortcut"
        @touchstart.stop.prevent="onStart"
        @touchmove.stop.prevent="onMove"
        @touchend.stop.prevent
      >
        <ul>
          <li
            v-for="(item, index) in shortcutList"
            :key="item"
            class="item"
            :data-index="index"
            :class="{ current: currentindex === index }"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </Scroll>
    <RouterView v-slot="{ Component }">
      <Transition name="slider">
        <component :is="Component" :singer="singer"></component>
      </Transition>
    </RouterView>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import useScroll from './useScroll'
import { getSingerList } from '@/services/singer'
import Scroll from '@/components/base/scroll/scroll.vue'
import storage from 'good-storage'
export default {
  name: 'Singer',
  components: {
    Scroll
  },
  setup () {
    const singerlist = ref([])
    getSingerList().then((res) => {
      singerlist.value = res.singers
    })
    const scrollref = ref(null)
    // 跳转到详情页面
    const router = useRouter()
    const singer = ref({})
    const todetail = (item) => {
      singer.value = item
      storage.session.set('__singer__', item)
      router.push(`/singer/${item.mid}`)
    }
    return {
      singerlist,
      ...useScroll(singerlist, scrollref),
      scrollref,
      todetail,
      singer
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  position: fixed;
  width: 100%;
  top: 88px;
  bottom: 0;
  .index-list {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: $color-background;
    .group {
      padding-bottom: 30px;
      .title {
        height: 30px;
        line-height: 30px;
        padding-left: 20px;
        font-size: $font-size-small;
        color: $color-text-l;
        background: $color-highlight-background;
      }
      .item {
        display: flex;
        align-items: center;
        padding: 20px 0 0 30px;
        .avatar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
        .name {
          margin-left: 20px;
          color: $color-text-l;
          font-size: $font-size-medium;
        }
      }
    }
    .fixed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      .fixed-title {
        height: 30px;
        line-height: 30px;
        padding-left: 20px;
        font-size: $font-size-small;
        color: $color-text-l;
        background: $color-highlight-background;
      }
    }
    .shortcut {
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      padding: 20px 0;
      border-radius: 10px;
      text-align: center;
      background: $color-background-d;
      font-family: Helvetica;
      .item {
        padding: 3px;
        line-height: 1;
        color: $color-text-l;
        font-size: $font-size-small;
        &.current {
          color: $color-theme;
        }
      }
    }
  }
}
</style>
